
<template>
<div>
	
    <div class="head">
        <h3> <b><img src="../../images/home_logo.png" alt=""></b> </h3>	
            <div>
                <b><img src="../../images/search.png"></b>
                <span><router-link to="/search">请输入关键词</router-link></span>
            </div>
        <p><i><img src="../../images/message.png" alt=""></i></p>
    </div>
    <div class="head1">
        <h3> <b><img src="../../images/home_logo.png" alt=""></b> </h3>	
            <div>
                <b><img src="../../images/search.png"></b>
                <span><router-link to="/search">请输入关键词</router-link></span>
            </div>
        <p>
            <i><img src="../../images/message1.png" alt=""></i>
            <span>消息</span>
        </p>
        
    </div>

    <div class="scol_1">
        <mt-swipe :auto="4000">
            <mt-swipe-item><img src="../../images/sc1.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../images/sc2.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../images/sc3.jpg" alt=""></mt-swipe-item>
        </mt-swipe>
	</div>

    <div class="table">
        <ul>
            <li v-for="(v,i) in tablelist">
                <b><img :src="v.imgs"/></b>
                {{v.msg}}
            </li>
        </ul>
    </div>
    <a href="#" class="pic"><img src="../../images/s0_06410148789140650.jpg"></a>
    <h2>
        <p>
            <span>淘库抢购</span>
            <router-link to="/more"><a>更多</a></router-link>
        </p>
	</h2>

   <div class="scl22">       
        <mt-swipe :show-indicators="false">
            <mt-swipe-item>
                <ul>
                    <li v-for="(v,i) in scl2_1">
                        <b>抢购</b>
                        <i><img :src="v.img"></i>
                        <p>￥<b>{{v.eprice}}</b></p>
                        <span>￥<em>{{v.fpricd}}</em></span>
                    </li>
                </ul>               
            </mt-swipe-item>
            <mt-swipe-item>
                <ul>
                    <li v-for="(v,i) in scl2_2">
                        <b>秒杀</b>
                        <i><img :src="v.img"></i>
                        <p>￥<b>{{v.eprice}}</b></p>
                        <span>￥<em>{{v.fpricd}}</em></span>
                    </li>
                </ul>               
            </mt-swipe-item>
        </mt-swipe>        
    </div>
    
    <a href="#" class="pic"><img src="../../../../data/images/s0_06227649450396097.jpg"></a>
    <h2>
        <p>
            <span>淘库秒杀</span>
            <a>更多</a>
        </p>
	</h2>
    <div class="scl22">       
        <mt-swipe :show-indicators="false">
            <mt-swipe-item>
                <ul>
                    <li v-for="(v,i) in scl2_1">
                        <b>秒杀</b>
                        <i><img :src="v.img"></i>
                        <p>￥<b>{{v.eprice}}</b></p>
                        <span>￥<em>{{v.fpricd}}</em></span>
                    </li>
                </ul>               
            </mt-swipe-item>
            <mt-swipe-item>
                <ul>
                    <li v-for="(v,i) in scl2_2">
                        <b>秒杀</b>
                        <i><img :src="v.img"></i>
                        <p>￥<b>{{v.eprice}}</b></p>
                        <span>￥<em>{{v.fpricd}}</em></span>
                    </li>
                </ul>               
            </mt-swipe-item>
        </mt-swipe>        
    </div>
    <a href="#" class="pic"><img src="../../../../data/images/s0_06227655549051850.jpg"></a>
    <div class="scol_3">
        <mt-swipe :auto="3000">
            <mt-swipe-item v-for="(v,i) in scl3"><img :src="v"></mt-swipe-item>
            
        </mt-swipe>
	</div>
    <h2>
        <p>
            <span>淘库特价</span>
            <a>更多</a>
        </p>
	</h2>
    <div class="dcon">
        <p v-for="(v,i) in dcon1">
            <em><img :src="v.img"></em>
            <u>{{v.msg}}</u>
            <span>￥<b>{{v.price}}</b></span>
        </p>       
    </div>
    <h2>
        <p>
            <span>淘库国际</span>
            <a>更多</a>
        </p>
	</h2>
    <div class="dcon">
        <p v-for="(v,i) in dcon2">
            <em><img :src="v.img"></em>
            <u>{{v.msg}}</u>
            <span>￥<b>{{v.price}}</b></span>
        </p>       
    </div>
    <h2>
        <p>
            <span>淘库好店</span>
            <a>更多</a>
        </p>
	</h2>
    <div class="dcon">
        <p v-for="(v,i) in dcon3">
            <em><img :src="v.img"></em>
            <u>{{v.msg}}</u>
            <span>￥<b>{{v.price}}</b></span>
        </p>       
    </div>
    <a href="#" class="pic"><img src="../../../../data/images/s0_06227657812210141.jpg"></a>
    <div class="recommend">
           <ul>
           		<li v-for="(v,i) in recommend"><img :src="v"></li>
           </ul>
            <ul class="ul1">
           		<li v-for="(v,i) in recommend1"><img :src="v"></li>
           </ul>
    </div>
    <h2>
        <p>
            <span>全球优选</span>
            <a>更多</a>
        </p>
	</h2>
    <div class="dcon">
        <p v-for="(v,i) in dcon4">
            <em><img :src="v.img"></em>
            <u>{{v.msg}}</u>
            <span>￥<b>{{v.price}}</b></span>
        </p>       
    </div>
    <h2>
        <p>
            <span>兴农扶贫</span>
            <a>更多</a>
        </p>
	</h2>
    <h2>
        <p>
            <span>企业采购</span>
            <a>更多</a>
        </p>
	</h2>
    <h2>
        <p>
            <span>工厂直供</span>
            <router-link to="/more"><a>更多</a></router-link>
        </p>
	</h2>

    <div class="back">
        <span><router-link to="/my">我的商城</router-link></span>
        <span>反馈</span>
        <span class="returnTop">返回顶部</span>
    </div>    
    <div class="app">
        <p>				
            <span>
                <i><img src="../../images/jiangjin.png"></i>
                <b><img src="../../images/app1.png"></b>
            </span>
            <em>下载有奖</em>
        </p>
        <p>				
            <span><img src="../../images/app2.png"></span>
            <em class="secem">触屏版</em>
        </p>
        <p>				
            <span><img src="../../images/app3.png"></span>
            <em>电脑版</em>
        </p>
    </div>
    <div class="cound">淘库科技提供云计算技术服务</div>
    <p class="gotop">
        <i><img src="../../images/gotop.png"></i>
    </p>

</div>    
</template>


<script>
    export default{
        data(){
            return {
                tablelist:{},

                scl3:{},
                scl2_1:{},
                scl2_2:{},
                dcon1:{},
                dcon2:{},
                recommend:{},
                recommend1:{},
                dcon3:{},
                dcon4:{}
            }
        },
        methods:{
           
        },
        mounted(){
            this.$http.get('./data/index.json')
            .then((response)=>{
                this.tablelist=response.data.tables;
                
                this.scl2_1=response.data.scl2_1;
                this.scl2_2=response.data.scl2_2;

                this.scl3=response.data.scl3;
                this.dcon1=response.data.dcon1;
                this.dcon2=response.data.dcon2;
                this.recommend=response.data.recommend;
                this.recommend1=response.data.recommend1;
                this.dcon3=response.data.dcon3;
                this.dcon4=response.data.dcon4;
            })
            .catch(function (error) {
		     // handle error
		     console.log(error);
		   })
		   .then(function () {
		     // always executed
		   });
           //头部显示
             $(window).scroll(function(event) {
                // 窗口滚动的时候触发
                console.log($(window).height());
                // scrollTop()滚动坐标
                if($(window).scrollTop()>$('.scol_1').height()){
                    $('.head').show();
                    $('.head1').hide()                      
                }else{
                    $('.head').fadeOut()
                    $('.head1').show(); 
                }
            });
            //底部返回
            $(window).scroll(function(event) {
                // 窗口滚动的时候触发
                // scrollTop()滚动坐标
                if($(window).scrollTop()>$(window).height()){
                    $('.gotop').show();                       
                }else{
                    $('.gotop').fadeOut()
                }
            });
            $('.gotop').click(function(event) {
                // 设置滚动坐标 
                $('html,body').animate({'scrollTop':'0px'});
            });
            $('.returnTop').click(function(event) {
                // 设置滚动坐标 
                $('html,body').animate({'scrollTop':'0px'});
            });
        }
    }
</script>



<style>
	/* 这是头部导航栏的内容 */
   	.head{
        width: 100%;
        height: 40px;
        position: fixed;
        z-index:10;
        top: 0px;
        padding: 5px 0px;
        background: #C91523;
        display:none;
    }
    .head>h3{
        width: 80px;
        height:40px;
        position:absolute;
        top:5px;
        left:0px;
    }
    .head>h3>b{
        width: 75px;
        height: 37px;
        display:block;
        margin:5px 5px;
    }
     .head>h3 img{
       width:75px;
       height:30px;
   }
      .head>div{
        width:calc(100% - 160px);
        height: 100%;
        margin: 0px auto;
        border-radius: 3px;
        background: white;
        position: relative;
        left: 12.5px;
    }
    .head>div>b{
        width: 18px;
        height: 18px;
        display: block;
        float:left;
        margin:6px 5px;
        padding:5px;
    }
    .head>div>b img{
        width:20px;
        height:20px;
    }
    .head>div>span{
        width:120px;
        line-height:20px;
        font-size:18px;
        color:gray;
        float:left;
        display:block;
        margin:10px 0px;
        
    }
    .head>div>span a{
        color:gray;
    }
    .head>p{
        width: 55px;
        height: 40px;
        display: block; 
        position:absolute;
        top:5px;
        right:0px;      
        z-index:12;                
    }
   .head>p>i{
        width:30px;
        height:30px;
        display:block;
        margin:5px 15px;
   }
   .head>p>i>img{
        width:30px;
        height:30px;
   }
/*顶部*/
    .head1{
        width: 100%;
        height: 40px;
        position: fixed;
        z-index:10;
        top: 0px;
        padding: 5px 0px;
    }
    .head1>h3{
        width: 80px;
        height:40px;
        position:absolute;
        top:5px;
        left:0px;
    }
    .head1>h3>b{
        width: 75px;
        height: 37px;
        display:block;
        margin:5px 5px;
    }
     .head1>h3 img{
       width:75px;
       height:30px;
   }
      .head1>div{
        width:calc(100% - 160px);
        height: 100%;
        margin: 0px auto;
        border-radius: 3px;
        background: white;
        position: relative;
        left: 12.5px;
        opacity:0.8;
    }
    .head1>div>b{
        width: 18px;
        height: 18px;
        display: block;
        float:left;
        margin:6px 5px;
        padding:5px;
    }
    .head1>div>b img{
        width:20px;
        height:20px;
    }
    .head1>div>span{
        width:120px;
        line-height:20px;
        font-size:18px;
        color:gray;
        float:left;
        display:block;
        margin:10px 0px;
        
    }
    .head1>div>span a{
        color:gray;
    }
    .head1>p{
        width: 55px;
        height: 40px;
        display: block; 
        position:absolute;
        top:5px;
        right:0px;      
        z-index:12;                
    }
   .head1>p>i{
        width:20px;
        height:20px;
        display:block;
        margin:5px 15px;
   }
   .head1>p>i>img{
        width:100%;
        height:100%;
   }
   .head1>p>span{
        color: white;
        font-size: 0.6rem;
        right: 20px;
        top: 25px;
        position: absolute;
   }
   

   /*第一个轮播图*/
   .scol_1{     
        height: 175px;
        width: 100%;
    }
  .scol_1 .mint-swipe-indicators{
        display:none;
  }
  .scol_1 img{
        height:175px;
         width:100%;
  }

   /* table内容 */
    .table>ul{
        overflow:hidden;
        border-bottom: 1px solid #d8d6d6;
    }
    .table>ul>li{
        float:left;
        width:20%;
        height:75px;
        text-align:center;
        font-size:15px;
        padding:12.5px 0px 7.5px;
    }
   .table>ul>li>b{
        position:relative;
        left:50%;
        margin-left:-19px;
        margin-bottom:8px;
        display:block;
        width:37px;
        height:37px;
   }
   .table>ul>li>b>img{
       width:37px;
       height:37px;
   }

    .pic img{
       width:100%;
       
    }

    h2{
        width: 100%;
        height: 40px;
        padding:0px 10px;
		}
    h2>p{
        height: 20px;
        
        display: block;
        margin: 10px 20px 10px 0px;
        border-left: 4px solid red;
        padding-left: 6px;
        font-size: 17px;
        line-height: 20px;
    }
    h2>p>span{
        height: 20px;
        float: left;
        display: block;
    }
    h2>p>a{
        text-decoration: none;
        height: 20px;
        float: right;
        display: block;
        color: #1F1FF0;
    }
   /*这是第二个轮播图*/
   
    .scl22{
        width:100%;
        height:170px;
    }
    .scl22 ul{
        width:600px;
    }
    .scl22 ul>li{
        width: 120px;
        position: relative;
        overflow:hidden;
        float: left;
        text-align:center;
    }
    .scl22 li>b{
        background: #f54246;
        font-size: 16px;
        display: block;
        width: 104px;
        height: 42px;
        position: absolute;
        color: #fff;
        top: -10px;
        left: -40px;
        z-index: 3;
        text-align: center;
        line-height: 62px;
        overflow: hidden;
        -webkit-transform: rotate(-45deg);
        text-shadow: 0 0 black;				   
    }
    .scl22 li>i{
        width: 120px;
        height: 120px;
        display: block;
    }
    .scl22 li>i img{
        width: 120px;
        height: 120px;
    }
    .scl22 li>p{
        width: 100%;
        display: block;
        font-size: 15px;
        color: red;
        line-height: 20px;
    }
    .scl22 li>span{
        color: #777;
        font-size: 0.8em;
        text-decoration: line-through;
        vertical-align: top;
    }


   /* 第三个轮播图 */
    .scol_3{     
        width: 100%;
        height:93px;
        }
    .scol_3 .mint-swipe-indicators{
        display:none;
    }
    .scol_3 img{
        width:100%;
    }

    /*主题内容*/
    .dcon{
        width:100%;
        padding: 0px 10px;
        overflow:hidden;
    }
    .dcon>p{
        display: block;
        float:left;
        width: 42%;
        padding:0px 10px;
        margin-bottom: 20px;
    }
    .dcon>p>b{
        width: 100%;
        display:block;
    }
    .dcon>p>em{
        width: 100%;
        display:block;
    }
    .dcon>p>em img{
        width:100%;
        
    }
    .dcon>p>u{
        display: block;
        font-size: 1rem;
        line-height: 1.2rem;
        height: 2.5rem;
        overflow: hidden;
        text-decoration: none;
    
    }
    .dcon>p>span{
        color:red;
    }

    /*导向推荐*/
    .recommend{
        width: 100%;
        overflow: hidden;

    }
    .recommend>ul>li{
        width: 49.5%;
        float: left;
        border-bottom:1px solid #eae7e759;
        border-right:1px solid #eae7e759;
    }
    .recommend>ul>li img{
        height: 50%;
        width: 100%;
    }
     .recommend>.ul1>li{
        float:right;
     }
    .recommend>ul>li img:nth-of-type(1){
        height: 100%;
    }
    .recommend>.ul1>li img:nth-of-type(1){
        height: 100%;
    }


    /*返回条*/
    .back{
        display: flex;
        justify-content:center;
        align-items:center;
        height: 37px;
        width: 100%;
        border-top: 0.1rem solid #EEE;
        border-bottom: 0.1rem solid #EEE;
    }
    .back a{
        color:black;
        text-decoration:none;
    }
    
    .back span{
        display: block;
        font-size: 0.9rem;
        line-height: 0.9rem;
        text-align: center;
        float: left;
        height: 0.9rem;
        width: 18%;		
    }
    .back span:nth-of-type(2){
        border-left: 0.5px solid #EEE;
        border-right: 0.5px solid #EEE;
    }

    /*app下载*/
    .app{
			width: 100%;
			height: 2rem;
    		padding: 0.2rem;
    		background: #F5F5F5;
            border-bottom:0.1rem solid #EEE;
		}
		.app>p{
			width: 33.3%;
			display: block;
			text-align: center;
			font-size: 0.5rem;
			color: #808080;
			float: left;
            height:100%;
		}
        .app>p>em{
            line-height:0.5rem;
            display:block;
        }
		.app>p>span{
			height: 1.2rem;
			display: inline-block; 
			position: relative;
		}
		.app>p>span>b{
			height: 1.2rem;
			display: inline-block;
		}
		.app>p>span>i{
			height: 0.4rem;
			position: absolute;
			top: -5px;
			right: 0px;
			display: inline-block;
		}
		.app .secem{
			color: black;
		}
		.app>p>span img{
			height: 100%;
		}

        /* 云服务*/
        .cound{
            height: 1.6rem;
            font-size: 0.6rem;
            line-height: 1.6rem;
            color: #555;
            text-align: center;
            margin-bottom:100px;
            background: #F5F5F5;
        }
        /* 返回顶层火箭 */
        .gotop{
            width: 2.5rem;
            height: 2.5rem;
            position: fixed;
            z-index: 5;
            right: 0.5rem;
            bottom: 3.8rem;
            background: #ffffffc7;
            border: 1px solid #cfcfcf;
            border-radius: 50%;
            display: block;
            display: flex;
            justify-content: center;
            align-items: center;
            display:none;
        }
        .gotop>i{
            width:1.5rem;
            height:1.5rem;
        }
        .gotop>i>img{
            width:100%;
            height:100%;
        }
</style>